<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import CTable from '@/components/table.vue'
import { incrementNumberComputed } from '../../utils';

const data1 = [
    { operator: '长沙...公司', route: '浏阳河政务航线', task: '浏阳河政务巡检' },
    { operator: '长沙...公司', route: '梅溪湖医疗物流', task: '医疗物流' },
    { operator: '长沙...公司', route: '梅溪湖巡检', task: '水域巡检' },
    { operator: '长沙...公司', route: '梅溪湖美团物...专线', task: '梅溪湖物流速递' },
    { operator: '长沙...公司', route: '浏阳河政务航线', task: '医疗物流' },
    { operator: '长沙...公司', route: '梅溪湖巡检', task: '水域巡检' },
    { operator: '长沙...公司', route: '梅溪湖美团物...专线', task: '梅溪湖物流速递' },
  ]

const data2 = [
  {
    operator: 'DJ92-323-21',
    route: '21.2913,73.2121',
    task: '医疗物流',
    detect: '雷达'
  },
  {
    operator: 'DJ92-323-21',
    route: '21.2913,73.2121',
    task: '水域巡检',
    detect: '光电设备'
  },
  {
    operator: 'DJ92-323-21',
    route: '21.2913,73.2121',
    task: '医疗物流',
    detect: '雷达'
  },
  {
    operator: 'DJ92-323-21',
    route: '21.2913,73.2121',
    task: '医疗物流',
    detect: '光电设备'
  },
  {
    operator: 'DJ92-323-21',
    route: '21.2913,73.2121',
    task: '水域巡检',
    detect: '雷达'
  },
  {
    operator: 'DJ92-323-21',
    route: '21.2913,73.2121',
    task: '医疗物流',
    detect: '光电设备'
  },
  {
    operator: 'DJ92-323-21',
    route: '21.2913,73.2121',
    task: '水域巡检',
    detect: '光电设备'
  }
]

// 
interface IData {
  // 运营商
  operator: string
  // 航线
  route: string
  // 飞行任务
  task: string
}


const tabs = [
  {
    name: '已登记用户',
    id: 0,
    count: incrementNumberComputed(33, 1000)
  },
  {
    name: '未知用户',
    id: 1,
    count: incrementNumberComputed(6, 1000)
  },
]

const active = ref(0)
const handleClick = (id: number) => {
  active.value = id
  data.value = active.value === 0 ? data1 : data2
}

// 表格配置
const items = computed(() => {
  if(active.value === 0) {
    return [
      {
        title: '运营商',
        key: 'operator'
      },
      {
        title: '航线',
        key: 'route'
      },
      {
        title: '飞行任务',
        key: 'task'
      },
    ]
  } else {
    return [
      {
        title: '飞行器型号',
        key: 'operator'
      },
      {
        title: '位置',
        key: 'route'
      },
      {
        title: '飞手位置',
        key: 'task'
      },
      {
        title: '侦测设备',
        key: 'task'
      }
    ]
  }
})
const data = ref<IData[]>([])

onMounted(() => {
  // TODO: 接口 结合 active

  data.value = active.value === 0 ? data1 : data2
})

// 点击表格行
const handleTableRow = (row: IData) => {
  // active 判断
  console.log(row)
}
</script>

<template>
  <div class="user">
    <div class="user-header"></div>
    <div class="user-content">
      <div class="user-content-tab card-tab">
        <div v-for="(item, index) in tabs" :key="index" :class="{
          'user-content-tab-item card-tab-item': true,
          'user-content-tab-item-active card-tab-item-active': active === item.id
        }" @click="handleClick(index)">{{ item.name }}<span>{{ item.count }}个</span>
        </div>
      </div>
      <c-table :items="items" :data="data" @click="handleTableRow"></c-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.user {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background: linear-gradient(287deg, rgba(2, 53, 115, 0.6) 10%, rgba(2, 53, 115, 0.4) 39%, rgba(41, 162, 255, 0.2) 113%);
  backdrop-filter: blur(4px);

  &-header {
    width: 100%;
    height: 74px;
    margin-top: -38px;
    // margin-bottom: 6px;
    background-image: url('@/assets/monitor/user-header.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  &-content {
    box-sizing: border-box;
    width: 100%;
    height: 348px;
    padding: 10px 20px 20px 20px;
    border-radius: 0px 0px 24px 24px;
    background: linear-gradient(0deg, rgba(2, 53, 115, 0.4) 28%, rgba(2, 53, 115, 0.6) 52%, rgba(0, 56, 99, 0) 113%);

    &-tab {
      margin: 10px 0 20px 0;

      &-item {
        display: flex;
        justify-content: center;
        align-items: center;

        span {
          display: inline-block;
          height: 20px;
          padding: 0 5px;
          margin-left: 4px;
          border-radius: 8px;
          background: rgba(11, 47, 123, 0.4);

          font-family: Source Han Sans CN;
          font-size: 12px;
          font-weight: bold;
          line-height: 20px;
          text-align: center;
          letter-spacing: normal;
          /* 文字颜色/主标题&一级标题 */
          color: #FFFFFF;
        }

        &-active {
          span {
            background: #1499FD;
          }
        }
      }
    }
  }
}
</style>
